<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyAI - 基于Spring AI的智能问答系统</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .btn {
            background-color: #409EFF;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #66b1ff;
        }
        
        input, textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            font-size: 14px;
        }
        
        input:focus, textarea:focus {
            outline: none;
            border-color: #409EFF;
        }
        
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        /* 页面切换控制 */
        .page {
            display: none;
            width: 100%;
            min-height: 100vh;
        }
        
        .page.active {
            display: flex;
        }
        
        /* 登录页样式 */
        #login-page {
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .login-container {
            width: 400px;
            padding: 40px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        
        .login-title {
            text-align: center;
            margin-bottom: 30px;
            color: #303133;
            font-size: 24px;
        }
        
        .login-form {
            width: 100%;
        }
        
        .login-btn {
            width: 100%;
        }
        
        /* 主页面样式 */
        #main-page {
            flex-direction: column;
        }
        
        .header {
            width: 100%;
            height: 60px;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 20px;
            position: fixed;
            top: 0;
            z-index: 100;
        }
        
        .logo {
            font-size: 20px;
            font-weight: bold;
            color: #409EFF;
            margin-right: 40px;
        }
        
        .nav {
            display: flex;
            height: 100%;
        }
        
        .nav-item {
            padding: 0 20px;
            display: flex;
            align-items: center;
            height: 100%;
            color: #606266;
            cursor: pointer;
            transition: color 0.3s;
            position: relative;
        }
        
        .nav-item:hover {
            color: #409EFF;
        }
        
        .nav-item.active {
            color: #409EFF;
        }
        
        .nav-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #409EFF;
        }
        
        .content {
            margin-top: 80px;
            width: 100%;
            max-width: 1200px;
            padding: 0 20px;
            flex: 1;
        }
        
        /* 聊天页面样式 */
        .chat-container {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 140px);
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        
        .message {
            margin-bottom: 15px;
            display: flex;
        }
        
        .message.user {
            justify-content: flex-end;
        }
        
        .message-content {
            max-width: 70%;
            padding: 10px 15px;
            border-radius: 4px;
            word-break: break-word;
        }
        
        .message.user .message-content {
            background-color: #ecf5ff;
            color: #409EFF;
            border-radius: 8px 0 8px 8px;
        }
        
        .message.ai .message-content {
            background-color: #f5f7fa;
            color: #606266;
            border-radius: 0 8px 8px 8px;
        }
        
        .chat-input {
            display: flex;
            padding: 15px;
            border-top: 1px solid #ebeef5;
        }
        
        .chat-input textarea {
            flex: 1;
            resize: none;
            height: 40px;
            margin-bottom: 0;
            margin-right: 15px;
        }
        
        /* 知识库页面样式 */
        .knowledge-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        
        .knowledge-title {
            font-size: 18px;
            color: #303133;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ebeef5;
        }
        
        .file-list {
            list-style: none;
        }
        
        .file-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #ebeef5;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .file-item:hover {
            background-color: #f5f7fa;
        }
        
        .file-icon {
            margin-right: 10px;
            color: #909399;
        }
        
        .file-name {
            flex: 1;
            color: #606266;
        }
        
        .file-actions {
            display: flex;
        }
        
        .file-action {
            padding: 5px 10px;
            color: #409EFF;
            cursor: pointer;
            font-size: 12px;
        }
        
        /* 文件上传页面样式 */
        .upload-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        
        .upload-title {
            font-size: 18px;
            color: #303133;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ebeef5;
        }
        
        .upload-area {
            border: 2px dashed #dcdfe6;
            border-radius: 6px;
            padding: 40px;
            text-align: center;
            color: #909399;
            cursor: pointer;
            transition: border-color 0.3s;
        }
        
        .upload-area:hover {
            border-color: #409EFF;
            color: #409EFF;
        }
        
        .upload-icon {
            font-size: 48px;
            margin-bottom: 10px;
        }
        
        .upload-text {
            margin-bottom: 10px;
        }
        
        .upload-hint {
            font-size: 12px;
            color: #909399;
        }
        
        .upload-btn {
            margin-top: 20px;
        }
        
        /* 文件内容查看弹窗 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal.active {
            display: flex;
        }
        
        .modal-content {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
            width: 80%;
            max-width: 800px;
            max-height: 80vh;
            overflow-y: auto;
            padding: 20px;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ebeef5;
        }
        
        .modal-title {
            font-size: 18px;
            color: #303133;
        }
        
        .modal-close {
            cursor: pointer;
            font-size: 20px;
            color: #909399;
        }
        
        .modal-body {
            color: #606266;
            line-height: 1.8;
        }
        
        /* 图标样式 */
        .icon {
            font-family: 'Material Icons';
            font-weight: normal;
            font-style: normal;
            font-size: 24px;
            display: inline-block;
            line-height: 1;
            text-transform: none;
            letter-spacing: normal;
            word-wrap: normal;
            white-space: nowrap;
            direction: ltr;
            vertical-align: middle;
        }
    </style>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <!-- 登录页 -->
    <div id="login-page" class="page active">
        <div class="login-container">
            <h2 class="login-title">MyAI 智能问答系统</h2>
            <div class="login-form">
                <div class="form-item">
                    <input type="text" id="username" placeholder="请输入用户名">
                </div>
                <div class="form-item">
                    <input type="password" id="password" placeholder="请输入密码">
                </div>
                <button class="btn login-btn" onclick="login()">登录</button>
            </div>
        </div>
    </div>
    
    <!-- 主页面 -->
    <div id="main-page" class="page">
        <div class="header">
            <div class="logo">MyAI</div>
            <div class="nav">
                <div class="nav-item active" onclick="switchTab('chat')">聊天</div>
                <div class="nav-item" onclick="switchTab('knowledge')">知识库</div>
                <div class="nav-item" onclick="switchTab('upload')">文件上传</div>
            </div>
        </div>
        
        <div class="content">
            <!-- 聊天页面 -->
            <div id="chat-tab" class="tab-content active">
                <div class="chat-container">
                    <div class="chat-messages" id="chat-messages">
                        <div class="message ai">
                            <div class="message-content">
                                您好，我是MyAI智能助手，有什么可以帮您解答的问题吗？
                            </div>
                        </div>
                    </div>
                    <div class="chat-input">
                        <textarea id="chat-input" placeholder="请输入您的问题..."></textarea>
                        <button class="btn" onclick="sendMessage()">发送</button>
                    </div>
                </div>
            </div>
            
            <!-- 知识库页面 -->
            <div id="knowledge-tab" class="tab-content">
                <div class="knowledge-container">
                    <h3 class="knowledge-title">我的知识库</h3>
                    <ul class="file-list" id="file-list">
                        <li class="file-item" onclick="viewFile('示例文档.pdf')">
                            <span class="icon file-icon">description</span>
                            <span class="file-name">示例文档.pdf</span>
                            <div class="file-actions">
                                <span class="file-action" onclick="event.stopPropagation(); viewFile('示例文档.pdf')">查看</span>
                                <span class="file-action" onclick="event.stopPropagation(); deleteFile('示例文档.pdf')">删除</span>
                            </div>
                        </li>
                        <li class="file-item" onclick="viewFile('使用说明.txt')">
                            <span class="icon file-icon">insert_drive_file</span>
                            <span class="file-name">使用说明.txt</span>
                            <div class="file-actions">
                                <span class="file-action" onclick="event.stopPropagation(); viewFile('使用说明.txt')">查看</span>
                                <span class="file-action" onclick="event.stopPropagation(); deleteFile('使用说明.txt')">删除</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 文件上传页面 -->
            <div id="upload-tab" class="tab-content">
                <div class="upload-container">
                    <h3 class="upload-title">上传文件</h3>
                    <div class="upload-area" onclick="triggerFileInput()">
                        <div class="upload-icon">
                            <span class="icon">cloud_upload</span>
                        </div>
                        <div class="upload-text">点击或拖拽文件到此处上传</div>
                        <div class="upload-hint">支持 .pdf, .txt 格式文件</div>
                    </div>
                    <input type="file" id="file-input" style="display: none" accept=".pdf,.txt" onchange="handleFileSelect()">
                    <button class="btn upload-btn" onclick="uploadFile()" disabled id="upload-btn">上传文件</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 文件内容查看弹窗 -->
    <div id="file-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">文件名</h3>
                <span class="modal-close" onclick="closeModal()">&times;</span>
            </div>
            <div class="modal-body" id="modal-body">
                文件内容将显示在这里...
            </div>
        </div>
    </div>
    
    <script>
        // 页面切换
        function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            if (!username || !password) {
                alert('请输入用户名和密码');
                return;
            }
            
            // 模拟登录成功
            document.getElementById('login-page').classList.remove('active');
            document.getElementById('main-page').classList.add('active');
        }
        
        // 切换导航标签
        function switchTab(tab) {
            // 更新导航项状态
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach(item => item.classList.remove('active'));
            event.currentTarget.classList.add('active');
            
            // 更新内容区域
            const tabContents = document.querySelectorAll('.tab-content');
            tabContents.forEach(content => content.classList.remove('active'));
            
            document.getElementById(`${tab}-tab`).classList.add('active');
        }
        
        // 发送聊天消息
        function sendMessage() {
            const input = document.getElementById('chat-input');
            const message = input.value.trim();
            
            if (!message) return;
            
            // 添加用户消息
            addMessage(message, 'user');
            input.value = '';
            
            // 模拟AI回复
            setTimeout(() => {
                const responses = [
                    "我理解您的问题，这是关于...",
                    "根据您提供的信息，我认为...",
                    "这个问题很有趣，让我来解答...",
                    "我需要更多信息来回答这个问题，您能否提供更多细节？",
                    "根据我的知识库，答案是..."
                ];
                const randomResponse = responses[Math.floor(Math.random() * responses.length)];
                addMessage(randomResponse, 'ai');
            }, 1000);
        }
        
        // 添加消息到聊天区域
        function addMessage(text, sender) {
            const messagesContainer = document.getElementById('chat-messages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${sender}`;
            
            const contentDiv = document.createElement('div');
            contentDiv.className = 'message-content';
            contentDiv.textContent = text;
            
            messageDiv.appendChild(contentDiv);
            messagesContainer.appendChild(messageDiv);
            
            // 滚动到底部
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }
        
        // 查看文件
        function viewFile(filename) {
            document.getElementById('modal-title').textContent = filename;
            
            // 模拟文件内容
            let content = '';
            if (filename.endsWith('.pdf')) {
                content = '这是一个PDF文件的内容预览。在实际应用中，这里会显示PDF文件的文本内容或提供PDF查看器。';
            } else if (filename.endsWith('.txt')) {
                content = '这是一个文本文件的内容。\n\n这是第二段内容。\n\n这是第三段内容，展示了文本文件的格式和布局。';
            }
            
            document.getElementById('modal-body').textContent = content;
            document.getElementById('file-modal').classList.add('active');
        }
        
        // 关闭弹窗
        function closeModal() {
            document.getElementById('file-modal').classList.remove('active');
        }
        
        // 删除文件
        function deleteFile(filename) {
            if (confirm(`确定要删除文件 "${filename}" 吗？`)) {
                // 模拟删除文件
                const fileList = document.getElementById('file-list');
                const items = fileList.querySelectorAll('.file-item');
                
                items.forEach(item => {
                    if (item.querySelector('.file-name').textContent === filename) {
                        fileList.removeChild(item);
                    }
                });
            }
        }
        
        // 触发文件选择
        function triggerFileInput() {
            document.getElementById('file-input').click();
        }
        
        // 处理文件选择
        function handleFileSelect() {
            const fileInput = document.getElementById('file-input');
            const uploadBtn = document.getElementById('upload-btn');
            
            if (fileInput.files.length > 0) {
                uploadBtn.removeAttribute('disabled');
                document.querySelector('.upload-text').textContent = `已选择: ${fileInput.files[0].name}`;
            } else {
                uploadBtn.setAttribute('disabled', true);
                document.querySelector('.upload-text').textContent = '点击或拖拽文件到此处上传';
            }
        }
        
        // 上传文件
        function uploadFile() {
            const fileInput = document.getElementById('file-input');
            
            if (fileInput.files.length === 0) {
                alert('请先选择文件');
                return;
            }
            
            const file = fileInput.files[0];
            
            // 检查文件类型
            if (!file.name.endsWith('.pdf') && !file.name.endsWith('.txt')) {
                alert('只支持上传 .pdf 或 .txt 格式的文件');
                return;
            }
            
            // 模拟上传过程
            const uploadBtn = document.getElementById('upload-btn');
            uploadBtn.textContent = '上传中...';
            uploadBtn.setAttribute('disabled', true);
            
            setTimeout(() => {
                // 模拟上传成功
                uploadBtn.textContent = '上传文件';
                
                // 添加到文件列表
                const fileList = document.getElementById('file-list');
                const fileItem = document.createElement('li');
                fileItem.className = 'file-item';
                fileItem.onclick = () => viewFile(file.name);
                
                const fileIcon = document.createElement('span');
                fileIcon.className = 'icon file-icon';
                fileIcon.textContent = file.name.endsWith('.pdf') ? 'description' : 'insert_drive_file';
                
                const fileName = document.createElement('span');
                fileName.className = 'file-name';
                fileName.textContent = file.name;
                
                const fileActions = document.createElement('div');
                fileActions.className = 'file-actions';
                
                const viewAction = document.createElement('span');
                viewAction.className = 'file-action';
                viewAction.textContent = '查看';
                viewAction.onclick = (e) => {
                    e.stopPropagation();
                    viewFile(file.name);
                };
                
                const deleteAction = document.createElement('span');
                deleteAction.className = 'file-action';
                deleteAction.textContent = '删除';
                deleteAction.onclick = (e) => {
                    e.stopPropagation();
                    deleteFile(file.name);
                };
                
                fileActions.appendChild(viewAction);
                fileActions.appendChild(deleteAction);
                
                fileItem.appendChild(fileIcon);
                fileItem.appendChild(fileName);
                fileItem.appendChild(fileActions);
                
                fileList.appendChild(fileItem);
                
                // 重置上传区域
                fileInput.value = '';
                document.querySelector('.upload-text').textContent = '点击或拖拽文件到此处上传';
                uploadBtn.setAttribute('disabled', true);
                
                // 切换到知识库标签
                switchTab('knowledge');
                
                alert('文件上传成功！');
            }, 1500);
        }
        
        // 初始化标签内容显示
        document.addEventListener('DOMContentLoaded', () => {
            const tabContents = document.querySelectorAll('.tab-content');
            tabContents.forEach(content => content.classList.remove('active'));
            document.getElementById('chat-tab').classList.add('active');
        });
        
        // 点击页面其他区域关闭弹窗
        window.onclick = function(event) {
            const modal = document.getElementById('file-modal');
            if (event.target === modal) {
                closeModal();
            }
        };
    </script>
</body>
</html>